<!--上方导航栏 -->
<template>
    <yd-layout>
      <yd-slider autoplay="3000">
        <yd-slider-item>
            <a href="http://www.ydcss.com">
                <img src="http://static.ydcss.com/uploads/ydui/1.jpg">
            </a>
        </yd-slider-item>
        <yd-slider-item>
            <a href="http://www.ydcss.com">
                <img src="http://static.ydcss.com/uploads/ydui/2.jpg">
            </a>
        </yd-slider-item>
        <yd-slider-item>
            <a href="http://www.ydcss.com">
                <img src="http://static.ydcss.com/uploads/ydui/3.jpg">
            </a>
        </yd-slider-item>
      </yd-slider>
      <div>
        <div class="tj-div">
          <span>推荐理由</span>
        </div>
        <div class="jj-div">
          <span>{{name_info}}</span>
        </div>
        <div class="user">
          <div>
            <img src="http://static.ydcss.com/uploads/ydui/1.jpg" class="tximg">
          </div>
          <div style="float: right;">
            <div class="dr-div">
              <span>达人收藏</span>
            </div>
            <div class="dr-div">
              <span>编者: 吴亦凡</span>
            </div>
          </div>
        </div>
      </div>
      <div class="line-div"></div>
      <div class="tj-div"><span>餐馆推荐</span></div>
        <div v-for="item in outdata" :key="item.index">
          <router-link :to="{path:'buyinfo',query: {id:item.place_id,longitude:item.longitude,latitude:item.latitude,image:item.image,content:item.content}}">
          <div class="line-style">
          <div>
            <img :src="item.image" alt="" srcset="" class="tj-img">
          </div>
          <div style="height:2rem;">
            <div class="xbtdiv"><span>{{item.name}}</span></div>
            <div class="adddiv"><span>距您位置 1.7KM</span></div>
            <div class="xfdiv"><span>人均消费: 50元</span></div>
            <div class="adddiv">平均分: <span>{{item.score}}</span>&nbsp;&nbsp;评论数: <span>{{item.num}}</span></div>
          </div>
          <div class="cgjsdiv" v-html="item.content">
            <!-- <span>{{item.name_info}}</span> -->
          </div>
        </div>
        </router-link>
      </div>
      <div class="mapbut">
      查看地图<hd-svg-icon name="hd-ditu" slot="left" size="20px" color="#000"></hd-svg-icon>
      </div>
    </yd-layout>    
</template>
<script>
export default {
  name: 'buyplacelist',
  data () {
    return {
      id: '',
      outdata: {},
      name_info: ''
    }
  },
  mounted: function() {
    this.load();
  },
  methods: {
    load() {
      this.hdAjax({
        url: this.API.findTwoByUseList,
        data: {
          type: 'S',
          id: this.$route.query.id
        },
        success: (resultData) => {
          this.outdata = resultData.data.results;
          this.name_info = this.$route.query.name_info
          // this.indata = this.outdata.sublist;
        }
      });
    }
  }
}
</script>
<style scoped>
.tj-div{
  font-size: 0.4rem;
  padding: 10px 20px 10px 20px;
}
.jj-div{
  font-size: 0.3rem;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom:10px;
  width:90%;
}
.tximg{
  height: 1rem;
  width: 1.5rem;
  float: right;
  margin-right: 10px;
  border-radius: 30px;
  margin-bottom: 10px;
}
.dr-div{
  font-size: 0.3rem;
  margin: 5px 10px 5px 10px;
  
}
.line-style{
  border-bottom: 1px solid #999999;
  margin-left: 4%;
  width: 92%;
}
.line-div{
  margin-left: 4%;
  width: 92%;
}
.tj-img{
  height: 2rem;
  width: 2.5rem;
  float: left;
}
.xbtdiv{
  margin-left: 44%;
  font-size: 0.4rem;
  margin-top:30px;
}
.adddiv{
  margin-left: 44%;
  font-size: 0.25rem;
  margin-top:10px;
  
}
.xfdiv{
  margin-left: 44%;
  font-size: 0.3rem;
  margin-top: 10px;
}
.cgjsdiv{
  font-size: 0.3rem;
  margin: 30px 20px 20px 10px;
}
.mapbut{
  border: 1px solid #000;
  border-radius: 20px;
  background: #fff;
  text-align: center;
  position: fixed;
  width: 25%;
  height: 35px;
  line-height: 35px;
  left: 37.5%;
  bottom: 10px;
  z-index: 100;
}
.mapbut .icon-ucenter-outline:before {
  content: "\E616";
  color: #000;
}
.user{
  float: right;
  margin-bottom: 10px;
  border-bottom: 1px solid #999999;
  margin-right: 4%;
  width: 92%;
  
}
</style>
